<template>
  <div>
    <div class="Sheets-box"></div>
    <div class="Sheets">
      叩丁狼电商管理系统
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {sepet} from '../../store/mutations'
import { loginApi } from "../../request/httpaip";
export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          // 👆是否必填---------👆提示内容--------------👆失焦
          { validator: this.validateUsername, trigger: "blur" },
          // 👆设置调用规则-----------------------👆失焦
        ],
        checkPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    validateUsername(rule, value, cd) {
      // 校验规则
      if (value.length <= 3) {
        return cd("请输入多于三个字符");
      }
      cd();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          //  验证通过----获取token
          loginApi({
            password: this.ruleForm.checkPass,
            username: this.ruleForm.username,
          }).then((res) => {
            if (res.errno === 0) {
              console.log(res);

              localStorage.setItem("token", res.data.token);
              // 存储token到服务器
              this.$store.commit(sepet, res.data.menu);
              //  获取用户权限
              this.$router.push("/home");
              //  跳转页面到首页
            }
          });
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
body {
  position: relative;
  .Sheets-box {
    background-color: #324057;
    width: 100%;
    height: 100vh;
  }
  .Sheets {
    color: #ffffff;
    width: 250px;
    height: 250px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .el-form {
      margin-top: 20px;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>